<template>
	<view class="m-t-6 flex flex-wrap row-center">
		<view v-for="(item, index) in params.prizes" :key="index" class="lattice nr"
			:class="{ 'active': activeIndex == index, 'start': item.flag && index == 4, 'end': !item.flag && index == 4 }"
			@click="startLuckDraw(index)">
			<image :src="item.image || ''"></image>
			<view>{{ item.name || item.tips }}</view>
		</view>
	</view>
</template>

<script>
	import {
		apiLuckyDrawStart
	} from "@/api/luck_draw.js"
	const ORDER = [1, 2, 3, 8, '', 4, 7, 6, 5]
	export default {
		props: {
			ids: {
				type: Number
			},
			params: {
				type: Object || Array,
				default: {}
			},
			// 最少转动多少个
			circleTimes: {
				type: Number,
				default: 30
			},
		},

		data() {
			return {
				isRunLuckDraw: false, //是否抽奖进行中
				orderIndex: -1, //中奖的索引
				activeIndex: -1, //当前显示在页面上的显示索引
				currentIndex: 1, //显示到第几个
				speed: 200, //抽奖的转动间隔

				result: '', //提示结果
			}
		},
		methods: {
			async startLuckDraw(index) {
				// 上锁，在抽奖期间不允许点击
				if (this.isRunLuckDraw) return
				this.isRunLuckDraw = true;
				if (index == 4) {
					const res = await apiLuckyDrawStart({
						id: this.ids
					})
					if (res) {
						this.result = res.tips
						this.orderIndex = res.location;
						this.start()
					}
					this.$parent.getLuckyDrawActivityFunc();
				}
			},

			// 开始抽奖
			start() {
				let index = this.currentIndex % 9;
				if (index == 0) {
					index = 1
					this.currentIndex += 1
				}
				this.currentIndex += 1

				// 中奖的索引
				const orderIndex = ORDER.findIndex(item => item == this.orderIndex)
				this.activeIndex = ORDER.findIndex(item => item == index);

				if (this.currentIndex > this.circleTimes + 8 && orderIndex == this.activeIndex) {
					if (this.luckDrawTimer) {
						clearTimeout(this.luckDrawTimer);
						setTimeout(this.reset, 1500)
						setTimeout(this.stopCallbackFun, 500)
					}
				} else {
					if (this.currentIndex < this.circleTimes) {
						this.speed -= 10
					} else {
						this.speed += 60
					}
					if (this.speed < 50) {
						this.speed = 50
					}
					this.luckDrawTimer = setTimeout(this.start.bind(this), this.speed);
				}
			},

			// 重设转盘
			reset() {
				this.isRunLuckDraw = false;
				this.currentIndex = -1;
				this.speed = 100;
				this.activeIndex = -1
			},

			// 转盘结束
			stopCallbackFun() {
				this.$emit("finish", {
					detail: this.result
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lattice {
		color: #743C3C;
		padding: 20rpx;
		width: 171rpx;
		height: 171rpx;
		border-radius: 20rpx;
		background: url('@/bundle/static/images/choujiang_block.png') no-repeat;
		background-size: 171rpx 171rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		text-align: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.lattice:nth-child(n+7) {
		margin-bottom: 0;
	}

	.lattice:nth-child(3n) {
		margin-right: 0;
	}


	.lattice:nth-child(5) {
		view {
			margin-top: 12rpx !important;
			font-size: $-font-size-xs;
		}
	}

	// 5
	.start {
		color: #ED3720;
		background: url('@/bundle/static/images/choujiang_button.png') no-repeat;
		background-size: 171rpx 171rpx;

	}

	// 5
	.end {
		color: #666666;
		background: url('@/bundle/static/images/choujiang_button_end.png') no-repeat;
		background-size: 171rpx 171rpx;
	}

	// 当前的
	.active {
		opacity: 0.6;
	}
</style>